<html>
    <head>
        <meta charset="utf-8">
        
            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
        
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 800px;
                 background-color: #ffffff;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }

             

             

             
        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"color": "#97c2fc", "description": "\u5f20\u89d2\u662f\u4e1c\u6c49\u672b\u5e74\u9ec4\u5dfe\u8d77\u4e49\u7684\u9886\u8896\uff0c\u4e0e\u5f1f\u5f1f\u5f20\u6881\u3001\u5f20\u5b9d\u5171\u540c\u53d1\u52a8\u8d77\u4e49\uff0c\u53f7\u53ec\u767e\u59d3\u53cd\u6297\u5b98\u5e9c\u3002", "id": 1, "label": "\u5f20\u89d2", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5f20\u6881\u662f\u5f20\u89d2\u7684\u5f1f\u5f1f\uff0c\u4e0e\u5f20\u89d2\u3001\u5f20\u5b9d\u4e00\u8d77\u53d1\u52a8\u9ec4\u5dfe\u8d77\u4e49\uff0c\u53c2\u4e0e\u53cd\u6297\u5b98\u5e9c\u7684\u6597\u4e89\u3002", "id": 2, "label": "\u5f20\u6881", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5f20\u5b9d\u662f\u5f20\u89d2\u7684\u5f1f\u5f1f\uff0c\u4e0e\u5f20\u89d2\u3001\u5f20\u6881\u4e00\u8d77\u53d1\u52a8\u9ec4\u5dfe\u8d77\u4e49\uff0c\u53c2\u4e0e\u53cd\u6297\u5b98\u5e9c\u7684\u6597\u4e89\u3002", "id": 3, "label": "\u5f20\u5b9d", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u9ec4\u5dfe\u519b\u662f\u5f20\u89d2\u5144\u5f1f\u9886\u5bfc\u7684\u8d77\u4e49\u519b\uff0c\u4ee5\u5934\u88f9\u9ec4\u5dfe\u4e3a\u6807\u5fd7\uff0c\u53f7\u53ec\u767e\u59d3\u53cd\u6297\u5b98\u5e9c\uff0c\u58f0\u52bf\u6d69\u5927\u3002", "id": 12, "label": "\u9ec4\u5dfe\u519b", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u6c49\u7075\u5e1d\u662f\u4e1c\u6c49\u65f6\u671f\u7684\u7687\u5e1d\uff0c\u9762\u5bf9\u9ec4\u5dfe\u8d77\u4e49\u7684\u5a01\u80c1\uff0c\u4e0b\u4ee4\u5404\u5730\u5b98\u519b\u9632\u5907\uff0c\u5e76\u6d3e\u9063\u4e2d\u90ce\u5c06\u5362\u690d\u3001\u7687\u752b\u5d69\u3001\u6731\u96bd\u7387\u519b\u9547\u538b\u8d77\u4e49\u3002", "id": 4, "label": "\u6c49\u7075\u5e1d", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5362\u690d\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u4e2d\u90ce\u5c06\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u8d77\u4e49\uff0c\u4e0e\u7687\u752b\u5d69\u3001\u6731\u96bd\u5171\u540c\u4f5c\u6218\u3002", "id": 5, "label": "\u5362\u690d", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u7687\u752b\u5d69\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u4e2d\u90ce\u5c06\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u8d77\u4e49\uff0c\u4e0e\u5362\u690d\u3001\u6731\u96bd\u5171\u540c\u4f5c\u6218\u3002", "id": 6, "label": "\u7687\u752b\u5d69", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u6731\u96bd\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u4e2d\u90ce\u5c06\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u8d77\u4e49\uff0c\u4e0e\u5362\u690d\u3001\u7687\u752b\u5d69\u5171\u540c\u4f5c\u6218\u3002", "id": 7, "label": "\u6731\u96bd", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u90b9\u9756\u662f\u5e7d\u5dde\u592a\u5b88\u7684\u5c5e\u4e0b\uff0c\u5efa\u8bae\u62db\u52df\u5175\u9a6c\u4ee5\u5bf9\u6297\u5f20\u89d2\u5144\u5f1f\u7684\u9ec4\u5dfe\u519b\u3002", "id": 8, "label": "\u90b9\u9756", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5218\u5907\u662f\u6dbf\u53bf\u7684\u4e00\u4f4d\u8d2b\u5bd2\u4eba\u7269\uff0c\u9760\u8d29\u9ebb\u978b\u3001\u7ec7\u8349\u5e2d\u4e3a\u751f\uff0c\u56e0\u770b\u5230\u62db\u52df\u4e49\u519b\u7684\u699c\u6587\u800c\u52a0\u5165\u9ec4\u5dfe\u8d77\u4e49\u3002", "id": 9, "label": "\u5218\u5907", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5f20\u98de\u662f\u6dbf\u53bf\u7684\u4e00\u4f4d\u5356\u9152\u3001\u5c60\u5bb0\u732a\u7f8a\u7684\u5546\u4eba\uff0c\u613f\u610f\u62ff\u51fa\u5bb6\u4ea7\u4e0e\u5218\u5907\u5171\u540c\u5e72\u4e00\u756a\u5927\u4e8b\u4e1a\uff0c\u540e\u6210\u4e3a\u5218\u5907\u7684\u7ed3\u4e49\u5144\u5f1f\u3002", "id": 10, "label": "\u5f20\u98de", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u5173\u7fbd\u662f\u6dbf\u53bf\u7684\u4e00\u4f4d\u5c60\u6237\uff0c\u4e0e\u5218\u5907\u3001\u5f20\u98de\u4e00\u8d77\u7ed3\u4e3a\u5144\u5f1f\uff0c\u540e\u6210\u4e3a\u5218\u5907\u7684\u91cd\u8981\u5c06\u9886\u3002", "id": 11, "label": "\u5173\u7fbd", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u6843\u56ed\u662f\u5218\u5907\u3001\u5f20\u98de\u3001\u5173\u7fbd\u7ed3\u4e3a\u5f02\u59d3\u5144\u5f1f\u7684\u5730\u70b9\uff0c\u8c61\u5f81\u7740\u4ed6\u4eec\u7684\u5144\u5f1f\u60c5\u8c0a\u548c\u5171\u540c\u7684\u5fd7\u5411\u3002", "id": 14, "label": "\u6843\u56ed", "shape": "dot", "size": 10}, {"color": "#97c2fc", "description": "\u6dbf\u53bf\u662f\u5218\u5907\u3001\u5f20\u98de\u3001\u5173\u7fbd\u4e09\u4eba\u7ed3\u4e3a\u5144\u5f1f\u7684\u5730\u65b9\uff0c\u4e5f\u662f\u4ed6\u4eec\u5f00\u59cb\u53cd\u6297\u5b98\u5e9c\u7684\u5730\u65b9\u3002", "id": 13, "label": "\u6dbf\u53bf", "shape": "dot", "size": 10}]);
                  edges = new vis.DataSet([{"description": "\u5f20\u89d2\u4e0e\u5f20\u6881\u662f\u5144\u5f1f\uff0c\u5171\u540c\u9886\u5bfc\u9ec4\u5dfe\u8d77\u4e49\uff0c\u53cd\u6297\u5b98\u5e9c\u7684\u538b\u8feb\u3002", "from": 1, "label": "\u5144\u5f1f", "to": 2, "width": 1}, {"description": "\u5f20\u89d2\u4e0e\u5f20\u5b9d\u662f\u5144\u5f1f\uff0c\u5171\u540c\u9886\u5bfc\u9ec4\u5dfe\u8d77\u4e49\uff0c\u53cd\u6297\u5b98\u5e9c\u7684\u538b\u8feb\u3002", "from": 1, "label": "\u5144\u5f1f", "to": 3, "width": 1}, {"description": "\u5f20\u89d2\u662f\u9ec4\u5dfe\u519b\u7684\u9886\u8896\uff0c\u9886\u5bfc\u8d77\u4e49\u519b\u53cd\u6297\u4e1c\u6c49\u671d\u5ef7\u7684\u8150\u8d25\u7edf\u6cbb\u3002", "from": 1, "label": "\u9886\u8896", "to": 12, "width": 1}, {"description": "\u6c49\u7075\u5e1d\u662f\u4e1c\u6c49\u7687\u5e1d\uff0c\u9762\u5bf9\u9ec4\u5dfe\u519b\u7684\u8d77\u4e49\uff0c\u4e0b\u4ee4\u9547\u538b\uff0c\u6d3e\u9063\u519b\u961f\u8fdb\u884c\u9547\u538b\u3002", "from": 4, "label": "\u9547\u538b", "to": 12, "width": 1}, {"description": "\u5362\u690d\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u5c06\u9886\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u519b\u7684\u8d77\u4e49\u6d3b\u52a8\u3002", "from": 5, "label": "\u9547\u538b", "to": 12, "width": 1}, {"description": "\u7687\u752b\u5d69\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u5c06\u9886\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u519b\u7684\u8d77\u4e49\u6d3b\u52a8\u3002", "from": 6, "label": "\u9547\u538b", "to": 12, "width": 1}, {"description": "\u6731\u96bd\u662f\u6c49\u7075\u5e1d\u6d3e\u9063\u7684\u5c06\u9886\u4e4b\u4e00\uff0c\u8d1f\u8d23\u9547\u538b\u9ec4\u5dfe\u519b\u7684\u8d77\u4e49\u6d3b\u52a8\u3002", "from": 7, "label": "\u9547\u538b", "to": 12, "width": 1}, {"description": "\u90b9\u9756\u662f\u5e7d\u5dde\u592a\u5b88\u7684\u5c5e\u4e0b\uff0c\u5efa\u8bae\u62db\u52df\u5175\u9a6c\u5bf9\u6297\u9ec4\u5dfe\u519b\uff0c\u53c2\u4e0e\u9547\u538b\u8d77\u4e49\u3002", "from": 8, "label": "\u9547\u538b", "to": 12, "width": 1}, {"description": "\u5218\u5907\u662f\u9ec4\u5dfe\u519b\u7684\u6210\u5458\u4e4b\u4e00\uff0c\u56e0\u770b\u5230\u62db\u52df\u4e49\u519b\u7684\u699c\u6587\u800c\u52a0\u5165\u8d77\u4e49\u519b\u3002", "from": 9, "label": "\u6210\u5458", "to": 12, "width": 1}, {"description": "\u5218\u5907\u4e0e\u5f20\u98de\u662f\u7ed3\u4e49\u5144\u5f1f\uff0c\u5171\u540c\u53c2\u4e0e\u8d77\u4e49\uff0c\u5408\u4f5c\u5bf9\u6297\u5b98\u5e9c\u3002", "from": 9, "label": "\u7ed3\u4e49\u5144\u5f1f", "to": 10, "width": 1}, {"description": "\u5218\u5907\u4e0e\u5173\u7fbd\u662f\u7ed3\u4e49\u5144\u5f1f\uff0c\u5171\u540c\u53c2\u4e0e\u8d77\u4e49\uff0c\u5408\u4f5c\u5bf9\u6297\u5b98\u5e9c\u3002", "from": 9, "label": "\u7ed3\u4e49\u5144\u5f1f", "to": 11, "width": 1}, {"description": "\u5218\u5907\u4e0e\u5f20\u98de\u3001\u5173\u7fbd\u5728\u6843\u56ed\u7ed3\u4e49\uff0c\u5ba3\u8a93\u6210\u4e3a\u5f02\u59d3\u5144\u5f1f\uff0c\u8c61\u5f81\u4ed6\u4eec\u7684\u5144\u5f1f\u60c5\u8c0a\u3002", "from": 9, "label": "\u7ed3\u4e49", "to": 14, "width": 1}, {"description": "\u5218\u5907\u662f\u6dbf\u53bf\u7684\u4e00\u4f4d\u8d2b\u5bd2\u4eba\u7269\uff0c\u9760\u8d29\u9ebb\u978b\u3001\u7ec7\u8349\u5e2d\u4e3a\u751f\uff0c\u56e0\u770b\u5230\u62db\u52df\u4e49\u519b\u7684\u699c\u6587\u800c\u52a0\u5165\u9ec4\u5dfe\u8d77\u4e49\u3002", "from": 9, "label": "\u5c45\u4f4f", "to": 13, "width": 1}, {"description": "\u5f20\u98de\u662f\u9ec4\u5dfe\u519b\u7684\u6210\u5458\u4e4b\u4e00\uff0c\u613f\u610f\u51fa\u8d44\u4e0e\u5218\u5907\u5171\u540c\u5e72\u4e00\u756a\u5927\u4e8b\u4e1a\uff0c\u52a0\u5165\u8d77\u4e49\u519b\u3002", "from": 10, "label": "\u6210\u5458", "to": 12, "width": 1}, {"description": "\u5f20\u98de\u4e0e\u5173\u7fbd\u662f\u7ed3\u4e49\u5144\u5f1f\uff0c\u5171\u540c\u53c2\u4e0e\u8d77\u4e49\uff0c\u5408\u4f5c\u5bf9\u6297\u5b98\u5e9c\u3002", "from": 10, "label": "\u7ed3\u4e49\u5144\u5f1f", "to": 11, "width": 1}, {"description": "\u5f20\u98de\u4e0e\u5218\u5907\u3001\u5173\u7fbd\u5728\u6843\u56ed\u7ed3\u4e49\uff0c\u5ba3\u8a93\u6210\u4e3a\u5f02\u59d3\u5144\u5f1f\uff0c\u8c61\u5f81\u4ed6\u4eec\u7684\u5144\u5f1f\u60c5\u8c0a\u3002", "from": 10, "label": "\u7ed3\u4e49", "to": 14, "width": 1}, {"description": "\u5f20\u98de\u662f\u6dbf\u53bf\u7684\u4e00\u4f4d\u5356\u9152\u3001\u5c60\u5bb0\u732a\u7f8a\u7684\u5546\u4eba\uff0c\u613f\u610f\u62ff\u51fa\u5bb6\u4ea7\u4e0e\u5218\u5907\u5171\u540c\u5e72\u4e00\u756a\u5927\u4e8b\u4e1a\uff0c\u540e\u6210\u4e3a\u5218\u5907\u7684\u7ed3\u4e49\u5144\u5f1f\u3002", "from": 10, "label": "\u5c45\u4f4f", "to": 13, "width": 1}, {"description": "\u5173\u7fbd\u662f\u9ec4\u5dfe\u519b\u7684\u6210\u5458\u4e4b\u4e00\uff0c\u56e0\u88ab\u5218\u5907\u3001\u5f20\u98de\u7684\u4e49\u6c14\u6240\u6253\u52a8\u800c\u52a0\u5165\u8d77\u4e49\u519b\u3002", "from": 11, "label": "\u6210\u5458", "to": 12, "width": 1}, {"description": "\u5173\u7fbd\u4e0e\u5218\u5907\u3001\u5f20\u98de\u5728\u6843\u56ed\u7ed3\u4e49\uff0c\u5ba3\u8a93\u6210\u4e3a\u5f02\u59d3\u5144\u5f1f\uff0c\u8c61\u5f81\u4ed6\u4eec\u7684\u5144\u5f1f\u60c5\u8c0a\u3002", "from": 11, "label": "\u7ed3\u4e49", "to": 14, "width": 1}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};

                  


                  

                  network = new vis.Network(container, data, options);

                  

                  

                  


                  

                  return network;

              }
              drawGraph();
        </script>
    </body>
</html>